<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="">
<meta name="description" content="mezz">
<meta name="author" content="mezz">
<link href="css/css.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<!--[if lt IE 9]>
    <link href="css/ie.css" rel="stylesheet" type="text/css" >
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
<![endif]-->
<!--[if lte IE 6]><meta http-equiv="refresh" content="0;url=IE6/IE6.html"><![endif]-->
<link href="favicon.ico" rel="SHORTCUT ICON">

<script src="js/jquery-3.5.1.min.js"></script>
 <!-- import Vue before Element -->
 <script src="js/vue.min.js"></script>
 <!-- import JavaScript -->
 <script src="js/element-ui/index.js"></script>
    <link href="./css/element-ui/index.css" rel="stylesheet">

    <script src="./js/layer.js"></script>

<style type="text/css">
.img img{
  border-radius: 80px;

}
  .comment-list .child .replytxtcon{ padding-right:30px; font-size: 12px;}
  .replytime{ color:#999;font-size: 12px;}
  .replyname{ display:inline-block; margin-right:10px;font-size: 12px;}
  .reply-post-header { line-height:25px; font-size:12px; }
  .reply-child{ padding:5px;   }
  .reply-child-child{margin-left: 30px;}
  .reply-dele{ display:inline-block; color:#a0cd4e; margin-left:10px;}
  .reply-dele a{ color:#a0cd4e;}
  .replyimg{border-radius: 25px;}
  .dialogClass .el-dialog__body {
    color: #606266;
    font-size: 14px;
    background:#f9f9f9;
    padding: 0px 0px;
  }
  .dialogClass .el-dialog__footer {
    text-align: right;
  }
  .dialogClass .el-dialog__header{
    padding: 0px 0px 0px;
  
  }
  .dialogClass .el-dialog__headerbtn{
    top:0px;
    right: 10px;
  }
  .indexbgc{
  color: chartreuse;
  }
  .unindexbgc{
  color:black;
  }
 [v-cloak]{
    display: none;
  } 
  
  
  
  </style>
<title>17素材·私厨 - 为你推荐遍布全球最新鲜，最与众不同的顶级生活方式</title>
</head>
<body  >
<div id="app" v-cloak>
  <div class="head" >
    <div class="wrap clearfix">
      <a href="index.html" class="logo indent">logo</a>
      <div class="headr fr">
        <form action="active.html" method="post" class="headsearch">
          <label class="label">
            <input type="text" value="" name="" class="key">
            <span class="text">搜索地址、名称、时间等</span>
          </label>
          <button type="submit" class="button btn-search">&#xe628;</button>
        </form>
        <a href="#"><em><img src="images/sb.png"></em>  &nbsp;&nbsp;发布我的饭局</a>
        <div class="user" >
          <span class="clearfix"><span class="userimg">
            <template v-if="userTx!=null">
                <img :src=userTx>
            </template>>
            <template v-else>
                <img src="upload/img12.png">
            </template></span>
          <a  href="javascript:;" class="fr" style="     width: 80px; float: right;text-overflow : ellipsis;overflow: hidden;white-space: nowrap;display: block; " >{{user}}<em>&#xe607;</em></a></span>
            <ul class="topslide">
                <li><em>&#xe627;</em><a href="mem.html">个人设置</a></li>
                <li><em>&#xe63d;</em><a href="Message.html">消息中心</a></li>
                <li><em>&#xe63c;</em><a href="Dinner.html">饭局管理</a></li>
                <li><em>&#xe63e;</em><a href="fans.html">我的好友</a></li>
                <li><em>&#xe61b;</em><a href="My_Messages.html" >我的留言</a></li>
                <li  onclick="exit()"><em>&#xe611;</em><a href="#">退出</a></li>
            </ul>
          </ul>
        </div>
      </div>
    </div>
  </div>

<div class="mem-banner" style="background-image:url(upload/img11.jpg);"></div>


<div class="memwrap wrap clearfix"  v-cloak>
  <div class="section fl">
    <div class="location tr"><a href="Message.html" class="current">与我相关</a></div>
    <div class="message pd30">
      <!-- <div class="plmain">
        <div class="plm clearfix"><span class="fr">(您还可输入 <span id="textCount">90</span> 个字)</span>回复 <a href="#">会员名称</a></div>
        <div class="textarea_input"><textarea id="TextArea1" onkeyup="words_deal();" ></textarea></div>
        <div class="tool_submit tr"><button type="button" name="" value="" class="button sublist">留 言</button></div>
      </div> -->
      
      <div class="plmcomment mt30">
        <ul class="comment-list">
          <li class="np-post" v-for="itemfather in replylist">
            <a href="home.html" class="fans img"><img :src=itemfather.newMessage.headPortrait></a>
            <div class="post-body">
              <div class="post-header clearfix" v-if="itemfather.fatherMessage" v-cloak>
                <a href="home.html" class="name o" >{{itemfather.newMessage.replyuser}}</a>回复<span class="time" v-cloak>{{itemfather.newMessage.timetoString}}</span><span class="reply"><em class="myfont">&#xe640;</em><a href="javascript:;"  @click="Textblur(itemfather.id)"> 回复</a></span>
              </div>
              <div class="post-header clearfix" v-else v-cloak>
                <a href="home.html" class="name o" v-cloak>{{itemfather.newMessage.replyuser}}</a>留言<span class="time" v-cloak>{{itemfather.newMessage.timetoString}}</span><span class="reply"><em class="myfont">&#xe640;</em><a href="javascript:;"  @click="Textblur(itemfather.id)"> 回复</a></span>
              </div>
              <div class="post-content"><div class="txtcon" v-cloak style="font-size: 14px;" v-cloak>{{itemfather.newMessage.content}}</div></div>
              <div v-if="itemfather.fatherMessage">
              <div class="child">
                  <div class="post-header clearfix"><a href="home.html" class="name o" v-cloak v-text="itemfather.fatherMessage.replyuser" ></a><span class="time" v-cloak>{{itemfather.fatherMessage.timetoString}}</span></div>
                  <div class="post-content"><div class="txtcon" v-cloak>{{itemfather.fatherMessage.content}}</div></div>
              </div>

              <div class="reply-child" v-if="itemfather.fistReply">
                <div class="reply-post-header clearfix"><img class="replyimg" with="25px" height="25px" :src=itemfather.fistReply.headPortrait><a href="home.html" class="replyname o" v-cloak>{{itemfather.fistReply.replyuser}}</a>:<span class="replytxtcon" v-cloak>{{itemfather.fistReply.content}}</span>
                </div>
                </div>

                   <div class="reply-child" v-for="val in itemfather.fatherMessage.childLeaveMessage">
                      <div class="reply-post-header clearfix"><img class="replyimg" with="25px" height="25px" :src=val.headPortrait><a href="home.html" class="replyname o" v-cloak>{{val.replyuser}}</a>回复<a href="home.html" class="replyname o" v-cloak>{{val.toreplyuser}}</a>:<span class="replytxtcon" v-cloak>{{val.content}}</span>
                      </div>
                      </div>
                    </div>

                    <div class="plmain"  v-if="reply==itemfather.id">
                      <div class="plm clearfix"><span class="fr">(您还可输入 <span id="textCount" v-model="contentlength" v-cloak>{{contentlength}}</span> 个字)</span>回复</div>
                      <div class="textarea_input"><textarea id="TextArea1"  autofocus="autofocus" @blur="Textblur(0)" v-model="replycontent" @keyup="changelength()" maxlength="90" v-cloak >{{replycontent}}</textarea></div>
                      <!-- <div class="tool_submit tr" v-if="itemfather.fistReply"><button type="button" name="" value="" class="button sublist" @click="addReply(user,itemfather.newMessage.replyuser,itemfather.fistReply.id)">发表</button></div>
                      <div class="tool_submit tr" v-else><button type="button" name="" value="" class="button sublist" @click="addReply(user,itemfather.newMessage.replyuser,itemfather.newMessage.id)">发表</button></div> 
                      <div class="tool_submit tr" v-if="itemfather.fistReply"><button type="button" name="" value="" class="button sublist" @click="addReply(user,'浪子',itemfather.newMessage.id)">发表</button></div>-->
                      <div class="tool_submit tr" ><button type="button" name="" value="" class="button sublist" @click="addReply(user,itemfather.newMessage.replyuser,itemfather.newMessage.id)">发表</button></div>
                    </div>
          </li>
         
        </ul>
        <!--Pagination-->
        <div class="page mt20 clearfix" v-if="pagecount<5"><a href="#" class="prev" @click="upPage()"><em></em>上一页</a>
          <a href="#" v-for="index of pagecount-0" :number="index"  @click="changepage($event)" :class="nowpage==index?'indexbgc':'unindexbgc'" v-cloak>{{index}}</a>
          <!-- <a href="#">2</a><a href="#">3</a><a href="#">4</a>...<a href="#">23</a> -->
          <a href="#" class="next" @click="nextPage()">下一页<em></em></a>
        </div>
    
        <div class="page mt20 clearfix" v-else-if="nowpage<=3"><a href="#" class="prev"  @click="upPage()"><em></em>上一页</a>
          <a  v-for="index of pageindex-0" :number="index"  @click="changepage($event)" :class="nowpage==index?'indexbgc':'unindexbgc'" v-cloak> {{index}}</a>
          ...<a href="#"  @click="changepage($event)" :number="pagecount" :class="nowpage==pagecount?'indexbgc':'unindexbgc'" v-cloak>{{pagecount}}</a>
          <a href="#" class="next" @click="nextPage()"  >下一页<em></em></a>
        </div>
    
        <div class="page mt20 clearfix" v-else-if="(nowpage>3)&&(pagecount-2>=nowpage)"><a href="#" class="prev"  @click="upPage()"><em></em>上一页</a>
          <a href="#"   @click="changepage($event)" number="1" :class="nowpage==1?'indexbgc':'unindexbgc'">1</a>
         ...
          <a href="#" v-for="index of nowpage-0+1" v-if="index>=nowpage-0-1" :number="index"   @click="changepage($event)" :class="nowpage==index?'indexbgc':'unindexbgc'" v-cloak>{{index}}</a>
         ...<a href="#"   @click="changepage($event)" :number="pagecount" :class="nowpage==pagecount?'indexbgc':'unindexbgc'" v-cloak>{{pagecount}}</a>
          <a href="#" class="next" @click="nextPage()">下一页<em></em></a>
        </div> 
    
        <div class="page mt20 clearfix" v-else><a href="#" class="prev" @click="upPage()"><em></em>上一页</a>
          <a href="#"   @click="changepage($event)" number="1" :class="nowpage==1?'indexbgc':'unindexbgc'">1</span></a>
         ...
          <a href="#" v-for="index of pagecount-0" v-if="index>=pagecount-2" :number="index"   @click="changepage($event)" :class="nowpage==index?'indexbgc':'unindexbgc'" v-cloak>{{index}}</a>
          <a href="#" class="next" @click="nextPage()">下一页<em></em></a>
        </div> 
      </div>
      
    </div>
    
    
  </div>
  
  <div class="aside fr" v-cloak>
    <div class="pd15">
      <div class="userimg img">
          <template v-if="userTx!=null">
              <img width="100%" :src=userTx>
          </template>
          <template v-else>
              <img src="upload/img12.png">
          </template>
      </div>
      <div class="user-level tc" v-cloak>{{user}} <em></em><em></em></div>
<!--              <div class="tc"><a href="javascript:;" class="button btn-control btn-follow"> + 关注</a><a href="javascript:;" class="button btn-control btn-sent"><em class="myfont f18">&#xe63f;</em> 私信</a></div>-->
      <div class="Praise tc" style="margin-top: -30px" v-cloak>
<!--                  <em>&#xe61d;</em><em>&#xe61d;</em><em>&#xe61d;</em>-->
         <br> {{zy}} <br>{{city}}
      </div>

      <div class="txtwrap tc" v-cloak><h1 class="f16">个人简介</h1>{{info}}</div>
      <h1 class="f16" v-cloak>关注 {{carezh.length}}</h1>
        <ul class="followlist clearfix" style="height: 130px;overflow-y: auto;cursor: pointer" >
            <template v-for="(item,index) in carezh">
                <el-tooltip class="item" effect="dark" :content=item.nc placement="top-start" >
                    <li><img @click="toMessage(item)" :src="item.tx"  ></li>
                </el-tooltip>
            </template>
        </ul>
        <h1 class="f16">粉丝 {{fanszh.length}}</h1>
        <ul class="followlist bd0 clearfix" style="height: 130px;overflow-y: auto;cursor: pointer"  >
            <template v-for="(item,index) in fanszh">
                <el-tooltip class="item" effect="dark" :content=item.nc placement="top-start">
                    <li><img @click="toMessage(item)" :src="item.tx"></li>
                </el-tooltip>
            </template>
        </ul>
    </div>
  </div>
  
</div>
</div>

<script src="../yuefan_web/js/overall.js"></script>
<script src="js/jquery.js"></script>
<script src="js/Action.js"></script>

<script src="js/chosen.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function($){
	//select 样式美化
	 var config = {
		'.chosen-select-no-single' : {disable_search_threshold:10}
	}
	for (var selector in config) {
		$(selector).chosen(config[selector]);
	}
});
</script>
<script type="text/javascript">

  let vue=new Vue( {
    el: '#app',
       data: {
         shows:0,
         show:0,
         reply:0,//控制回复框
         replycontent:"",
        dialogVisible: false,
        contentlength:90,
        user:'',
        touser:'楠黎',
        replylist:[],
        nowpage:1,
        pagecount:0,
        pageindex:4,
        limitcount:3,
         //关注的账号
       carezh:[],
       //账号的粉丝
       fanszh:[],
       userTx:"",
       zy:"",
       city:"",
       info:'',
       
       },
       created(){
      let userinfo=sessionStorage.getItem("userinfo");
      let userobj=JSON.parse(userinfo);
      this.user=userobj.nc;
      this.userTx=userobj.tx;
      this.zy=userobj.zy;
      this.city=userobj.city;
      this.info=userobj.info;
      this.getFansandCare();
      this.replylist=this.getReply(this.user,0,this.limitcount) 
       },
       mounted() {
        this.ulogin()
        this.getCareCount(this.user);
       },
       methods: {
           //跳转其他用户
           toMessage(info){
               sessionStorage.setItem("ToMessage",JSON.stringify(info))
               window.location.href="My_Messages.html"
           },
           //判断是否登录
           ulogin(){
               //获取当前用户
               let zh = sessionStorage.getItem("zh")
               //判断是否登录
               if(zh==null){

                   this.$alert('请先登录！', '温馨提示', {
                       confirmButtonText: '确定',
                       callback: action => {
                           this.$message({
                               type: 'info',
                               message: `action: ${ action }`
                           });
                           window.location.href="./login.html"
                       }
                   });
               }

           },
                //加载关注和粉丝数据
       getFansandCare:async function(){
         let allinfo = await this.allinfo()
          let zh = sessionStorage.getItem("zh")
           //调用关注表的内容
         let careinfo = await this.careInfo()
         let caremsg = careinfo.data
         //获取
         for (let i=0;i<caremsg.length;i++){
                 for (let j=0;j<allinfo.length;j++){
                     //关注的账号
                     if(caremsg[i].user_zh==zh){
                         if(caremsg[i].care_zh==allinfo[j].zh){
                             this.carezh.push(allinfo[j])
                         }
                     }
                     //粉丝的账号
                     if(caremsg[i].care_zh==zh){
                         if(caremsg[i].user_zh==allinfo[j].zh){
                             this.fanszh.push(allinfo[j])
                         }
                     }
                 }
         }

},
//关注表的信息
careInfo:async function(){
  let msg
  await $.post('http://localhost:8080/CareServlet',{ },function (data) {
  msg=data
  },'JSON')
  return msg
},
           allinfo:async function() {
               let msg=null
               await $.post("http://localhost:8080/UserServlet",function (data){
                   msg=data.data
               },"JSON")
               return msg
           },
        chageshows:function(flag){
          this.shows=flag;
  
        },
        chageshow:function(flag){
          this.show=flag;
  
        },
        changepage:function(e){
          console.log(e)
          this.nowpage=e.target.getAttribute('number');
          e.target.style;
  
        
  
        },
        nextPage:function(){
         
          if(this.nowpage<this.pagecount){
     
          this.nowpage=parseInt(this.nowpage)+1;
         
          }
          else{
       
          this.nowpage=1;
          }
        },
        upPage:function(){
          if(this.nowpage!=1)
          this.nowpage=this.nowpage-1;
        },
         Textblur:function(flag){
           if(this.replycontent==""||flag!=0){
            if(flag==this.reply){
            this.reply=0;
            this.replycontent=""
          }else{
           this.reply=flag;
           this.replycontent=""
          }
          }
          
         },
         changelength:function(){
          let str=this.replycontent
           this.contentlength=90-str.length;
         },
         getReply:function(user,start,length){
          let arr= new Array();
          $.ajax({
             type:"get",
             url:"http://127.0.0.1:8080/newreply",
             data:{"username":user,"start":start,"length":length},
             dataType:"json",
             async:false,
             success:function(data){
              
               console.log(data)
               data=JSON.parse(data);
             
               if(data.code==0){
                arr=data.data;
               }
               
             }
            
           })
           console.log(arr[0].childLeaveMessage)
           return arr;
         },
         addReply:function(replyuser,toreplyuser,pid){
           let username=this.touser;
           let content=this.replycontent;
           if(content){
          $.ajax({
             type:"get",
             url:"http://127.0.0.1:8080/addR",
             data:{"replyuser":replyuser,"toreplyuser":toreplyuser,"pid":pid,"content":content,"username":username},
             dataType:"json",
             async:false,
             success:function(data){
               data=JSON.parse(data);
             
               if(data.code==0){
               console.log(data.data)
               }
               
             }
            
           })
           this.reply=0;
           this.replycontent=""
           this.replylist=this.getReply(this.touser,this.nowpage-1,this.limitcount);
           this.getCareCount(this.touser)
          }
        
         },
         deletereply:function(id){
          $.ajax({
             type:"get",
             url:"http://127.0.0.1:8080/deletereply",
             data:{"id":id},
             dataType:"json",
             async:false,
             success:function(data){
               data=JSON.parse(data);
             
               if(data.code==0){
               console.log(data.data)
               }
               
             }
            
           })
           this.replylist=this.getReply(this.touser,this.nowpage-1,this.limitcount);
           this.getCareCount(this.touser)
         },
         getCareCount:function(userid){
          let count=0;
           $.ajax({
             type:"get",
             url:"http://127.0.0.1:8080/countNewReply",
             data:{"username":userid},
             dataType:"json",
             async:false,
             success:function(data){
               data=JSON.parse(data)
               if(data["code"]==0){
                count=data.data;
               }
               
             }
           })
        
           let dev=this.limitcount;
       
           if(count%dev!=0){
            this.pagecount=parseInt(count/dev+1)
           }else{
             this.pagecount=count/dev
           }
          // this.pagecount=count
           console.log("page"+this.pagecount)
         }
        
  
       },
       watch: {
         nowpage:function(newVal, oldVal){
          //  alert((newVal-1)*this.limitcount)
         this.replylist=this.getReply(this.user,(newVal-1)*parseInt(this.limitcount),this.limitcount);
         
         },
       },
    })
  
  
  $(document).ready(function($){
    //select 样式美化
     var config = {
      '.chosen-select-no-single' : {disable_search_threshold:10}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  });
  </script>
</html>